// packageInsurance/pages/insurance-risk/insurance-risk.js
// import * as echarts from '../../../packageInsurance/components/ec-canvas/echarts';
let echarts = null
import {
    getInsuranceRisk
} from '../../api/insurance'
import user from '../../../utils/user'
Page({
    data: {
        isTipInsurance:false,
        tipTop:0,
        tipLeft:110,
        isTipInsuranceSum:false,
        tipTopSum:0,
        tipLeftSum:0,
        riskInfo: {},
        claimRate: '',
        ec: {
            lazyLoad: true
        },
        xlist: [],
        ylist: [],
        ylist2: [],
        list: ['全款', '待收货', '待发货', '已收货'],
        activeIndex: 0,
        option: {}
    },
    onLoad(options) {},
    async onReady() {
		echarts = await this.getEcharts()
		console.log(212121, echarts);
		this.setData({
			option: {
				series: [{
						type: 'gauge',
						radius: '95%',
						center: ['50%', '80%'],
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: 100,
						splitNumber: 20,
						padding:0,
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#FF7E68' // 0% 处的颜色
								}, {
									offset: 0.25,
									color: '#FF9444' // 100% 处的颜色
								}, {
									offset: 0.5,
									color: '#FFC53D' // 100% 处的颜色
								}, {
									offset: 0.75,
									color: '#B0ED00' // 100% 处的颜色
								}, {
									offset: 1,
									color: '#00D679' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						yAxis:{
							padding:0
						},
						xAxis:{
							padding:0
						},
						progress: {
							show: true,
							width: 50
						},
						pointer: {
							// icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
							show: false,
							length: '100',
							offsetCenter: [0, 0],
							itemStyle: {
								color: 'auto'
							}
						},
						axisLine: {
							lineStyle: {
								width: 25,
								color: [
									[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
											offset: 0.3,
											color: "rgba(255, 129, 114, 0.1)"
										},
										{
											offset: 0.7,
											color: "rgba(255, 197, 61, 0.1)"
										},
										{
											offset: 1,
											color: "rgba(115, 222, 179, 0.1)"
										}
									])]
								]
							}
						},
						axisTick: {
							distance: -40,
							splitNumber: 5,
							lineStyle: {
								width: 2,
								height: 2,
								color: '#FFF3E1'
							}
						},
						splitLine: {
							distance: -45,
							length: 14,
							show: false,
							lineStyle: {
								width: 3,
								height: 2,
								color: '#FFF3E1'
							}
						},
						axisLabel: {
							distance: -15,
							color: '#999',
							fontSize: 20,
							show: true,
							padding: [0,0,0,0],
							formatter: function (value) {
								if (value === 0) {
									return ['{a|极差}'].join('\n')
								} else if (value === 20) {
									return ['{b|较差}'].join('\n')
								} else if (value === 50) {
									return ['{c|}', '{c|}', '{c|}', '{c|一般}'].join('\n')
								} else if (value === 80) {
									return ['{d|不错}'].join('\n')
								} else if (value === 100) {
									return ['{e|优秀}'].join('\n')
								}
							},
							rich: {
								a: {
									fontWeight: 600,
									fontSize: 14,
									color: '#FF7E68',
									align: 'left',
									margin: 100
								},
								b: {
									fontWeight: 600,
									fontSize: 14,
									color: '#FF9444',
									align: 'center'
								},
								c: {
									fontWeight: 600,
									fontSize: 14,
									color: '#FFC53D',
									align: 'center',
									lineHeight: '6'
								},
								d: {
									fontWeight: 600,
									fontSize: 14,
									color: '#B0ED00',
									align: 'center'
								},
								e: {
									fontWeight: 600,
									fontSize: 14,
									color: '#00D679',
									align: 'center',
									margin: 100
								}
							},
						},
	
						anchor: {
							show: false
						},
						title: {
							show: false
						},
						detail: {
							valueAnimation: true,
							width: '0',
							height: '0',
							borderRadius: 8,
							offsetCenter: [0, '-40%'],
							fontWeight: 'bolder',
							formatter: function (value) {
								if (value <= 0) {
									return ['{a|极差}', '{b|综合评价}'].join('\n')
								} else if (value > 0 && value <= 25) {
									return ['{a|较差}', '{b|综合评价}'].join('\n')
								} else if (value > 25 && value <= 50) {
									return ['{a|一般}', '{b|综合评价}'].join('\n')
								} else if (value > 50 && value <= 75) {
									return ['{a|不错}', '{b|综合评价}'].join('\n')
								} else if (value > 75 && value <= 100) {
									return ['{a|优秀}', '{b|综合评价}'].join('\n')
								}
							},
							rich: {
								a: {
									fontSize: 20,
									fontWeight: 'bold',
									fontFamily: 'Arial',
									lineHeight: 20,
									margin: [250, 0, 0, 0],
									color: '#202536',
									align: 'center'
								},
								b: {
									fontSize: 16,
									fontWeight: 400,
									fontFamily: 'Arial',
									lineHeight: 30,
									color: '#9497B1',
									align: 'center'
								}
							},
							backgroundColor: '#fff',
	
							//   backgroundColor: {
							//     // width: '150%', 多个线
							//     // height:'80%',多个线
							//     // lineHeight: 60,多个线
							//     // borderRadius: 8,多个线
							//     // offsetCenter: [0, '-40%'],多个线
							//     // https://s1.ax1x.com/2022/11/10/z9u9w4.png 多个线
							//     // https://s1.ax1x.com/2022/11/10/zpbzSf.png
							//     // ../../assets/img/trend-bg.png
							//     // image: '../../assets/img/trend-bg.png'
							//   }
						},
						data: [{
							value: 70,
						}]
					},
					{
						type: 'gauge',
						center: ['50%', '80%'],
						radius: '71%',
						startAngle: 180,
						animation: false,
						endAngle: 0,
						min: 0,
						max: 100,
						itemStyle: {
							color: '#fff'
						},
						progress: {
							show: true,
							width: 30
						},
						pointer: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: 98
						}]
					},
					{
						type: 'gauge',
						center: ['50%', '80%'],
						radius: '60%',
						startAngle: 180,
						animation: false,
						endAngle: 0,
						min: 0,
						max: 100,
						itemStyle: {
							color: '#FFF8EF'
						},
						progress: {
							show: true,
							width: 2
						},
						pointer: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: 100
						}]
					}
				]
			}
		})
		this.getInsuranceRiskInfo()
    },
    onShow() {
	},
	getEcharts() {
		return new Promise((resolve) => {
			require('../../../packageInsurance/components/ec-canvas/echarts', utils => {
				console.log(111, utils) // Wechat MiniProgram
				resolve(utils)
			}, ({mod, errMsg}) => {
				console.error(`path: ${mod}, ${errMsg}`)
			})
		})
	},
    tipInsurance(event) {
        console.log(event)
        console.log(event.currentTarget.top)
        this.setData({
            isTipInsurance: true,
            isTipInsuranceSum: false,
            tipTop: event.currentTarget.offsetTop + 20,
            tipLeft: event.detail.x - 100
        })
    },
    tipInsuranceSum(event){
        console.log(event)
        console.log(event.currentTarget.top)
        this.setData({
            isTipInsuranceSum: true,
            isTipInsurance: false,
            tipTopSum: event.currentTarget.offsetTop + 20,
            tipLeftSum: event.detail.x - 40
        })
    },
    cancelTipInsurance() {
        // console.log('点击啦')
        if (this.data.isTipInsurance) {
            this.setData({
                isTipInsurance: false,
            })
        }
        if (this.data.isTipInsuranceSum) {
            this.setData({
                isTipInsuranceSum: false
            })
        }
    },
    // 风险信息
    async getInsuranceRiskInfo() {
        const result = await getInsuranceRisk({
            coName: user.companyName,
            insureCompanyType:'insure_type_tyrb'
        })
        this.setData({
            riskInfo: result,
            'riskInfo.insurRate': (result.insurRate * 100),
            'option.series[0].data[0].value': 100 - (100 * (Number(((result.finalMoney / result.totalPrice)*100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))) / 140),
            'option.series[1].data[0].value': (98 - (100 * (Number(((result.finalMoney / result.totalPrice)*100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))) / 140)) == 98 ? 100 : (98 - (100 * (Number(((result.finalMoney / result.totalPrice)*100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))) / 140)),
            'riskInfo.claimRate':Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))
        })
        console.log(this.data.riskInfo, 'riskInfo')
        this.oneComponent = this.selectComponent('#mychart-one');
        await this.getOneOption();
        console.log(this.data.option.series[0].data[0], this.data.option.series[1].data[0], '赋值内容')
    },
    tabClick(val) {
        this.setData({
            activeIndex: val.currentTarget.dataset.index
        })
    },
    getOneOption: function () {
        this.init_one()
    },
    init_one() {
        //初始化第一个图表
        this.oneComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            console.log(chart, 'chartchart')
            this.setOption(chart) //赋值给echart图表
            this.chart = chart;
            return chart;
        });
    },
    setOption(chart) {
        chart.setOption(this.data.option);
    }
})